<!--
  文件用途：后台布局（仅注释，不改逻辑）
  结构：左侧菜单 + 顶栏（用户/角色/切换/退出）+ 主区域（Breadcrumb + 内容）
  行为：根据路由 meta.hasList 和路径控制内容容器布局
-->
<template>
  <div class="layout">
    <el-container class="full">
      <el-aside width="220px" class="aside">
        <div class="logo">TodayJob Admin</div>
        <el-menu router :default-active="$route.path">
          <el-menu-item index="/overview/company"><i class="el-icon-data-analysis" /> 公司概览</el-menu-item>
          <el-menu-item index="/dashboard"><i class="el-icon-s-home" /> 仪表盘</el-menu-item>
          <el-menu-item index="/kanban">看板管理</el-menu-item>
          <el-menu-item index="/schedule">日程管理</el-menu-item>
          <el-menu-item index="/comments">评论管理</el-menu-item>
          <el-menu-item index="/worklogs">日志管理</el-menu-item>
          <el-menu-item index="/users">用户管理</el-menu-item>
          <el-menu-item index="/teams">团队管理</el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="header">
          <div class="left">后台管理</div>
          <div class="right">
            <span class="user" v-if="username">
              {{ username }}
              <el-tag size="small" :type="role==='admin' ? 'danger' : 'info'" style="margin-left:6px" v-if="role">{{ role }}</el-tag>
            </span>
            <el-button link @click="switchPanel" style="margin-left:12px" v-if="role==='admin'">切换面板</el-button>
            <el-button link @click="logout" style="margin-left:12px">退出</el-button>
          </div>
        </el-header>
        <el-main>
          <Breadcrumb />
          <div :class="['content-container', { 'is-wide': isDashboard, 'has-list': hasList }]">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Breadcrumb from '@/components/Breadcrumb.vue'
const router = useRouter()
const route = useRoute()
const username = localStorage.getItem('username') || ''
const role = (sessionStorage.getItem('role') || '').toLowerCase()
const isDashboard = computed(() => route.path === '/dashboard')
const hasList = computed(() => !!route.meta?.hasList)
function logout() {
  localStorage.removeItem('userId')
  localStorage.removeItem('username')
  sessionStorage.removeItem('role')
  router.push('/login')
}
function switchPanel(){ router.push('/entry') }
</script>

<style scoped>
.full { height: 100vh; }
.aside { border-right: 1px solid #f0f0f0; }
.logo { height: 56px; display: flex; align-items: center; padding-left: 12px; font-weight: 600; }
.header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; }
.user { color: #555; }
</style>
